<template>
  <div class="customer-container">
    <div class="container">
      <div class="tableBar">
        <el-input
          v-model="input1"
          placeholder="请输入客户编号"
          style="width: 350px"
          clearable
        />
        <el-input
          v-model="input2"
          placeholder="请输入客户姓名"
          style="width: 350px"
          clearable
        />
        <el-input
          v-model="input3"
          placeholder="请输入定位城市"
          style="width: 350px"
          clearable
        />
        <div
          class="btns"
          style="width:auto"
        >
          <el-button
            type="primary"
            @click="handleQuery"
          >查询</el-button>
          <el-button
            style="color:black!important"
            @click="resetSearch"
          >重置</el-button>
        </div>
      </div>
      <div class="tableLab">
        <div>
          <el-button
            type="primary"
            @click="importData"
          >导入</el-button>
          <el-button
            type="primary"
            @click="exportData"
          >导出</el-button>
          <el-button
            type="danger"
            @click="deleteHandle('批量', null)"
          >批量删除</el-button>
        </div>
        <el-button type="primary" style="width: 150px" @click="distribute">分配</el-button>
      </div>
      
      <el-table
        class="table"
        :data="tableData"
        @selection-change="handleSelectionChange"
        stripe
      >
        <el-table-column
          type="selection"
          width="55"
        />
        <el-table-column
          prop="id"
          label="客户编号"
          align="center"
        />
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
        />
        <el-table-column
          prop="phone"
          label="电话"
          align="center"
        />
        <el-table-column
          prop="city"
          label="自动定位城市"
          align="center"
        />
        <el-table-column
          prop="createTime"
          label="线索创建时间"
          align="center"
        />
        <el-table-column
          prop="preTime"
          label="最近互动时间"
          align="center"
        />
        <el-table-column
          label="操作"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="middle"
              @click="deleteHandle('单删', scope.row.id)"
              style="color:red!important"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        :current-page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import ResizeMixin from '@/layout/mixin/ResizeHandler'
export default {
  name: 'Customer',
  mixins: [ResizeMixin],
  data () {
    return {
      input1: '',
      input2: '',
      input3: '',
      page: 1,
      pageSize: 10,
      counts: 0,
      checkList: [],
      // checkboxGroup: ['上海'],
      // cities: ['上海', '北京', '广州', '深圳'],
      tableData: [],
    }
  },
  mounted () {
    this.init()
  },
  created () {
    this.init()
  },
  methods: {
    handleSelectionChange (val) {
      let checkArr = []
      val.forEach((n) => {
        checkArr.push(n.id)
      })
      this.checkList = checkArr
    },
    deleteHandle (type, id) {
      if (type === '批量' && id === null) {
        if (this.checkList.length === 0) {
          return this.$message.error('请选择删除对象')
        }
      }
      this.$confirm('该操作不可逆, 是否继续?', '确定删除', {
        'confirmButtonText': '确定',
        'cancelButtonText': '取消',
      }).then(() => {
        this.$store.dispatch('customer/deletes', { ids: type === '批量' ? this.checkList.join(',') : id }).then((response) => {
          if (response.code === 200) {
            this.$message.success('删除成功!')
            this.handleQuery()
          } else {
            this.$message.error('删除失败！')
          }
        }).catch(error => {
          this.$message.error(error)
        })
      })
    },
    init () {
      const params = {
        page: this.page,
        pageSize: this.pageSize,
        id: this.input1 ? this.input1 : undefined,
        name: this.input2 ? this.input2 : undefined,
        city: this.input3 ? this.input3 : undefined
      }
      this.$store.dispatch('customer/getAllCustomers', params).then((response) => {
        this.tableData = this.$store.getters.customers
        this.counts = response.data.total
      }).catch(error => {
        this.$message.error(error)
      })
    },
    resetSearch () {
      this.input1 = ''
      this.input2 = ''
      this.input3 = ''
      this.init()
    },
    importData () {
      this.$router.push({ path: '/import' })
    },
    exportData () {
      window.location.href = 'http://localhost:8082/customer/export'
    },
    distribute () {
      this.$router.push({ path: '/distribute' })
    },
    handleQuery () {
      this.page = 1;
      this.init();
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.init()
    },
    handleCurrentChange (val) {9
      this.page = val
      this.init()
    }
  }
}
</script>

<style scoped>
.customer-container {
  height: 100%;
  background-color: white;
  margin: 1.25rem;
  border-radius: 5px;
}
.container {
  padding: 1.25rem;
  width: 100%;
}
.tableBar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.tableBar > div {
  display: flex;
  width: 20rem;
  margin: 0 1.25rem 1.25rem 0;
  align-items: flex-start;
}
.tableBar div label {
  width: 8rem;
  text-align: left;
  height: 2.5rem;
  line-height: 2.5rem;
}
.el-button {
  display: inline-block;
  margin-left: 0;
  margin-right: 0.625rem;
}
.tableLab {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
@media screen and (max-width: 47.0624rem) {
  .customer-container {
    margin: 0;
  }
  .tableBar div {
    flex-wrap: wrap;
  }
  .tableBar div label {
    width: auto;
    text-align: left;
    height: 2.5rem;
    line-height: 2.5rem;
  }
  .btns {
    margin-top: 2.5rem !important;
  }
}
</style>